<template>
    <div>
        <div style="height: 50px;">
            <el-button round @click="AddOrder()">保存</el-button>
        </div>
        <!-- 添加 -->
        <table border="1"
            style="border-collapse: collapse; width: 100%; height: 30px;margin-top: 30px;margin-bottom: 30px;color:black">
            <tr>
                <td :colspan="8" style="height: 50px; font-size: 20px;">基本信息</td>
            </tr>
            <tr style="height: 70px;">
                <td>
                    <el-form ref="ruleFormRef" :model="form" label-width="120px" class="demo-ruleForm" size="small"
                        style="margin-top: 10px;">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="单据主题" prop="inspectionTheme">
                                    <el-input v-model="form.pOrderTopic" style="width:200px ;" size="large" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="单据编号" prop="inspectionNumber">
                                    <el-input v-model="form.pOrderNumber" placeholder="保存后自动生成" style="width:200px ;"
                                        size="large" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="关联生产计划" prop="purchaseContract">
                                    <el-input v-model="form.pPlanName" placeholder="双击弹出" style="width:200px ;"
                                        size="large" @dblclick="Plans" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="制单人" prop="supplierName">
                                    <el-input v-model="form.pDocumentMakers" style="width:200px ;" size="large" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="制单日期" prop="inspectionTheme">
                                    <el-date-picker v-model="form.pDocumentDate" type="date" placeholder="选择日期"
                                        format="YYYY/MM/DD" value-format="YYYY-MM-DD" size="large" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="关联销售合同" prop="inspectionNumber">
                                    <el-input style="width:200px ;" size="large" v-model="form.contractTopic"
                                        @dblclick="sale" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </td>
            </tr>
        </table>


        <!-- 产品表格 -->
        <el-button @click="AddRow">新增行</el-button>
        <table border="1" style="border-collapse: collapse; width: 100%; height: 40px;color:black">
            <thead>
                <tr>
                    <th><input type="checkbox" v-model="check" @change="toggleSelectAll" style="width: 30px;" />
                    </th>
                    <th style="height: 40px;">序号</th>
                    <th>产品名称</th>
                    <th>产品编号</th>
                    <th>规格</th>
                    <th>单位</th>
                    <th>订单数量</th>
                    <th>生产类型</th>
                    <th>计划开工日期</th>
                    <th>计划完工日期</th>
                    <th>交货日期</th>
                    <th>物料清单</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in checkplan" :key="index">
                    <td><input type="checkbox" v-model="ids" style="width: 30px;width: 100%;" @click="SelOrder" /></td>
                    <td style=" text-align: center;">{{ index + 1 }}</td>
                    <td><el-input v-model="item.pName" type="text" style="height: 40px; width: 100%;text-align: center;"
                            @dblclick="dialogVisible = true" placeholder="双击选择产品名称" />
                    </td>
                    <td><el-input v-model="item.pNumber" type="text"
                            style="height: 40px;width: 100%;text-align: center;" :disabled="true" /></td>
                    <td><el-input v-model="item.pSpec" type="text" style="height: 40px;width: 100%;text-align: center;"
                            :disabled="true" />
                    </td>
                    <td><el-input v-model="item.pUnit" type="text" style="height: 40px;width: 100%;text-align: center;"
                            @change="sumRPNum" />
                    </td>
                    <td><el-input v-model="item.ppNum" type="text" style="height: 40px;width: 100%;text-align: center;"
                            @dblclick="dialogVisible1 = true" />
                    </td>
                    <td><el-select style="width: 120px;" v-model="form.productionType">
                            <el-option value="待生产">待生产</el-option>
                            <el-option value="生产中">生产中</el-option>
                            <el-option value="已完成">已完成</el-option>
                        </el-select>
                    </td>
                    <td><el-date-picker v-model="item.ppAppStartDate" type="date" format="YYYY/MM/DD"
                            value-format="YYYY-MM-DD" />
                    </td>
                    <td><el-date-picker v-model="item.ppAppEndDate" type="date" format="YYYY/MM/DD"
                            value-format="YYYY-MM-DD" />
                    </td>
                    <td><el-date-picker v-model="item.ppReleDate" type="date" format="YYYY/MM/DD"
                            value-format="YYYY-MM-DD" />
                    </td>
                    <td><el-input v-model="item.mSubject" type="text"
                            style="height: 40px;width: 100%;text-align: center;" @dblclick="dialogVisible1 = true" />
                    </td>
                </tr>
            </tbody>
        </table>


        <!-- 产品名称弹框 -->
        <el-dialog v-model="dialogVisible" title="生产计划选择" width="1000" style="height: 500px;">
            <el-button @click="dialogVisible = false">确定</el-button>
            <el-table :data="Preproductlist" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="ppDocumentNumber" label="生产计划编号" />
                <el-table-column prop="pPlanName" label="生产计划主题" />
                <el-table-column prop="ppTotalQuantity" label="本次生产计划数量" />
                <el-table-column prop="preProductionState" label="生产订单状态">
                    <template #default="scope">
                        <span style="color: red;" v-if="scope.row.preProductionState == 1">未生成</span>
                        <span style="color:darkgoldenrod" v-if="scope.row.preProductionState == 2">部分生成</span>
                        <span style="color: green;" v-if="scope.row.preProductionState == 3">生成完毕</span>
                    </template>
                </el-table-column>
            </el-table>
            <table>
                <tr>
                    <td>
                        <el-pagination v-model:current-page="productPage.PageIndex"
                            v-model:page-size="productPage.PageSize" :page-sizes="[5, 10, 15, 20]" :background="true"
                            layout="slot, sizes" prev-text="上一页" next-text="下一页" :total="productPage.totalcount">
                            共{{ productPage.totalcount }}条数据，每页{{ productPage.PageSize }}条，共{{ productPage.PageIndex
                            }}/{{
                                productPage.pagecount }}页
                        </el-pagination>
                    </td>
                    <td>
                        <el-pagination v-model:current-page="productPage.PageIndex"
                            v-model:page-size="productPage.PageSize" :page-sizes="[5, 10, 15, 20]" :background="true"
                            layout="slot, prev, pager, next" prev-text="上一页" next-text="下一页"
                            :total="productPage.totalcount">
                            <el-button :disabled="productPage.PageIndex == 1">首页</el-button>
                        </el-pagination>
                    </td>
                    <td>
                        <el-pagination v-model:current-page="productPage.PageIndex"
                            v-model:page-size="productPage.PageSize" :page-sizes="[5, 10, 15, 20]" :background="true"
                            layout="slot, jumper" prev-text="上一页" next-text="下一页" :total="productPage.totalcount">
                            <el-button :disabled="productPage.PageIndex == productPage.pagecount">尾页</el-button>
                        </el-pagination>
                    </td>
                </tr>
            </table>
        </el-dialog>

        <!-- 销售合同弹框 -->
        <el-dialog v-model="dialogVisible2" title="销售合同" width="1000" style="height: 400px;color:black">
            <span></span>
            <template #footer>
                <el-table :data="showGet" border style="width: 100%" @selection-change="SaleSelection">
                    <el-table-column type="selection" width="55px" />
                    <el-table-column type="index" label="序号" width="55px" />
                    <el-table-column prop="sCcontractNumber" label="合同编号" width="180" />
                    <el-table-column prop="contractTopic" label="合同主题" width="180" />
                    <el-table-column prop="relevancyIName" label="关联项目" width="180" />
                    <el-table-column prop="clientName" label="客户名称" width="180" />
                    <el-table-column prop="scAgencyDate" label="签约日期" width="180" />
                    <el-table-column prop="scNum" label="数量合计" />
                    <el-table-column prop="scSalespeople" label="销售人员" width="180" />
                    <el-table-column prop="scTax" label="税额合计" width="180" />
                    <el-table-column prop="sCcontractPrice" label="合同总额" width="180" />
                    <el-table-column prop="scPreferentialPrice" label="优惠额度" width="180" />
                    <el-table-column prop="preferentialPrice" label="优惠后总额" width="180" />
                    <el-table-column label="操作" width="180" />
                </el-table>
                <el-button type="primary" @click="dialogVisible2 = false">
                    保存
                </el-button>
            </template>
        </el-dialog>

        <!-- 库管弹框 -->
        <el-dialog v-model="dialogVisible1" title="库管选择" width="1000" style="height: 700px;color:black">
            <span></span>
            <template #footer>
                <el-row>
                    <el-col :span="4">
                        <el-tree style="max-width: 600px" :data="sectorlist" default-expand-all="true"
                            @node-click="handleNodeClick2" />
                    </el-col>
                    <el-col :span="20">
                        <el-table :data="manpowerList" style="width:100%" @selection-change="handleSelectionChange2">
                            <el-table-column type="selection" width="55" />
                            <el-table-column type="index" label="序号" align="center" />
                            <el-table-column prop="mName" label="姓名" align="center" />
                            <el-table-column prop="sectorName" label="部门" align="center" />
                            <el-table-column prop="postName" label="岗位" align="center" />
                        </el-table>
                    </el-col>
                </el-row>
                <el-button type="primary" @click="dialogVisible1 = false">
                    保存
                </el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref, reactive, onMounted, computed, watch } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter();
import http from '../../../http.js'


const form = reactive({
    "poId": 0,
    "pOrderNumber": "",
    "pOrderTopic": "",
    "pDocumentMakers": localStorage.getItem("UserName"),
    "pDocumentDate": "",
    "productionPlansId": 0,
    "pPlanName": "",
    "pRemark": "",
    "saleContractId": 0,
    "contractTopic": "",
    "totalData": 0,
    "detailList": [
        {
            "ppId": 0,
            "poId": "",
            "pOrderNum": 0,
            "productionType": "",
            "pStartTime": "",
            "pCompletionDate": "",
            "pDeliveryDate": "",
            "productId": 0,
            "productionPlansId": 0,

        }
    ]
})


const dialogVisible = ref(false)
const dialogVisible1 = ref(false)
const dialogVisible2 = ref(false)

//点击新增行
const check = ref([])
const checkplan = ref([])
const AddRow = () => {
    checkplan.value.push({

    });
}

//#region  产品名称弹框


const Plans = () => {
    dialogVisible.value = true
    GetShowTime()
}


const productPage = reactive({
    PageIndex: 1,
    PageSize: 6,
    pagecount: 0,
    totalcount: 0,

})
watch(productPage, () => {
    GetShowTime();
})
const Preproductlist = ref([])
const GetShowTime = () => {

    axios.get(http.zblnb + '/sc/api/ProductionPlan/XMProductionPlanShow', {
        params: {
            PageIndex: productPage.PageIndex,
            PageSize: productPage.PageSize
        }
    }).then((res) => {
        console.log(res.data.data)
        Preproductlist.value = res.data.data.list
        productPage.totalcount = res.data.data.totalcount
        productPage.pagecount = res.data.data.pagecount

    }).catch((err) => {
        console.log(err);
    })
}

//选中的产品名称

const handleSelectionChange = (val: any) => {
    checkplan.value = val
    console.log(val)
    checkplan.value.forEach(item => {
        form.pPlanName = item.pPlanName
    })

}

//#endregion


//#region  库管 

//查询条件
const wform = reactive({
    MName: "",
    Mstart: "",
    Mend: "",
    Bstart: "",
    Bend: "",
    SectorId: "",
    PostId: ""
})

//分页
const wPage = reactive({
    Pindex: 1,
    Psize: 3,
    pcount: 0,
    lcount: 0
})

//部门
const sectorlist = ref([])
const GetSectorList = () => {
    axios.get(http.zblnb + '/vendor/api/Post/GetSectorList')
        .then(res => {
            sectorlist.value = res.data.data;
            console.log(sectorlist.value)
        })
}

//树形
const handleNodeClick2 = (data: Tree) => {
    console.log(data)
    wform.SectorId = data.value
    GetManpowerList();
}

//显示人员档案
const manpowerList = ref([])
const GetManpowerList = () => {
    axios.get(http.zblnb + '/vendor/api/Manpower/GetManpowerList', {
        params: {
            Pindex: wPage.Pindex,
            Psize: wPage.Psize,
            MName: wform.MName || "",
            Mstart: wform.Mstart || "",
            Mend: wform.Mend || "",
            Bstart: wform.Bstart || "",
            Bend: wform.Bend || "",
            SectorId: wform.SectorId || "",
            PostId: wform.PostId || "",
        }
    })
        .then(res => {
            manpowerList.value = res.data.data.list
            wPage.lcount = res.data.data.lcount;
            wPage.pcount = res.data.data.pcount;
            console.log(res.data.data)
        })
}


//多选框
const check2 = ref([])
const handleSelectionChange2 = (val: any) => {
    check2.value = val
    form.outManager = check2.value[0].mName
    form.manpowerId = check2.value[0].manpowerId

    console.log(form.outManager)
    console.log(form.manpowerId)
}


//#endregion


//#region  销售合同

const sale = () => {
    dialogVisible2.value = true
    Show()
}


const pagesale = reactive({
    PageIndex: 1,
    PageSize: 10,
    totalCount: 0,
    pageCount: 0
})
var showGet = ref([])
const Show = () => {
    axios.get(http.zblnb + '/cw/api/SaleContract/ShowStateSalesReturn', {
        params: {
            PageIndex: pagesale.PageIndex,
            PageSize: pagesale.PageSize,
        }
    }).then((res) => {
        if (res.data.code == 200) {
            console.log(res.data.data)
            showGet.value = res.data.data.list
            pagesale.totalCount = res.data.data.lcount
            pagesale.pageCount = res.data.data.pcount

        }
    })
}

var ids = ref([])
const SaleSelection = (val: any) => {
    ids.value = val
    ids.value.forEach(item => {
        form.contractTopic = item.contractTopic
    })
}

//#endregion



//输入数量change事件
const sumRPNum = (sum: number) => {
    console.log(sum)

}


var ids = ref([])
var selectedRows = ref([])
const SelOrder = () => {
    if (ids.value) {
        selectedRows.value = checkplan.value.filter(item => item.productionPlansId);
    }
    console.log(selectedRows.value)
}


const AddOrder = () => {
    var model = {
        // "poId": 0,
        // "pOrderNumber": "",
        "pOrderTopic": form.pOrderTopic,
        "pDocumentMakers": localStorage.getItem("UserName"),
        "pDocumentDate": form.pDocumentDate,
        "productionPlansId": 0,
        "pPlanName": form.pPlanName,
        "pRemark": "",
        "saleContractId": 0,
        "contractTopic": form.contractTopic,
        "totalData": form.totalData,
        "detailList": selectedRows.value.map(ele => ({

            // ppId :ele.ppId,
            pOrderNum: ele.ppNum,
            productionType: form.productionType,
            pStartTime: ele.ppAppStartDate,
            pCompletionDate: ele.ppAppEndDate,
            pDeliveryDate: ele.ppReleDate,
            productId: ele.productId,
            productionPlansId: ele.productionPlansId,
        }))
    }
    console.log(model)

    axios.post(http.zblnb + "/sc/api/ProsduceOrder/AddProOrder", model).then(res => {
        if (res.data.code == 200) {
            ElMessage.success("添加成功")
            router.push('/ProOrderList')
        } else {
            ElMessage.error("添加失败")
        }
    })
}



onMounted(() => {

})

</script>

<style scoped></style>